<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="${base}/" />
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<script src="js/jquery-3.5.0.js"></script>
<script src="layer/layer.js"></script>
<script>
function toList(){
	location.href="Adminservlet?opr=query";
}
	window.addEventListener("load", function() {
		let username = document.getElementById("username");
		let password = document.getElementById("password");
		let repwd = document.getElementById("repassword");
		let text1 = document.getElementById("text1");
		let text2 = document.getElementById("text2");
		let text3 = document.getElementById("text3");
		let msg = "${msg4}";
		if (msg != "") {
			layer.alert(msg);
		}

		let success = "${success}";
		if (success != "") {
			layer.alert(success);
		}

		function setColor(obj, color) {
			return obj.style.color = color;
		}

		function validateName() {
			let usernameValue = username.value.trim();
			if (usernameValue == "") {
				text1.innerHTML = "用户名不能为空";
				setColor(text1, "red");
				username.focus();
				return false;
			} else if (usernameValue.length<2||usernameValue.length>15) {
				text1.innerHTML = "用户名长度不合法";
				setColor(text1, "red");
				this.focus();
				return false;
			} else {
				return true;
			}
		}
		let pwdValue;
		function validatePassword() {
			pwdValue = password.value.trim();
			if (pwdValue == "") {
				text2.innerHTML = "密码不能为空";
				setColor(text2, "red");
				this.focus();
				return false;
			} else if (pwdValue.length<2||pwdValue.length>15) {
				text2.innerHTML = "密码长度不合法";
				setColor(text2, "red");
				this.focus();
				return false;
			} else {
				text2.innerHTML = "格式正确";
				setColor(text2, "green");
				return true;
			}
		}
		function validateRepwd() {
			let repwdValue = repwd.value.trim();
			if (repwdValue !== pwdValue) {
				text3.innerHTML = "密码不一致";
				setColor(text3, "red");
				return false;
			} else {
				text3.innerHTML = "密码一致";
				setColor(text3, "green");
				return true;
			}
		}

		username.addEventListener("blur", function() {
			if (validateName()) {
				let xhr = new XMLHttpRequest();
				xhr.open("get","Adminservlet?opr=queryAccount2&account="+username.value);
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4){
						let result = JSON.parse(xhr.responseText);
						if(result.code==200){
							if(!result.data){
								text1.innerHTML = "该账号可用";
								setColor(text1, "green");
							}else{
								text1.innerHTML = "该账号已被注册";
								setColor(text1, "red");
							}
						}else{
							text1.innerHTML = "";
						}
						
					}
				}
				xhr.send();
				
			}
		});

		password.addEventListener("blur", validatePassword);
		repwd.addEventListener("blur", validateRepwd);

		document.getElementById("form1").addEventListener(
				"submit",
				function(e) {
					if (!validateName() || !validatePassword()
							|| !validateRepwd()) {
						e.preventDefault();
					}
				})
	})
</script>
<body>
	<div class="panel admin-panel">
		<div class="panel-head" id="add">
			<strong><span class="icon-pencil-square-o"></span>增加管理员</strong>
		</div>
		<div class="padding border-bottom">
			<button type="button" class="button border-yellow" onclick="toList()">
				<span class="icon-plus-square-o"></span>查看所有管理员
			</button>
		</div>
		<div class="body-content">
			<form method="post" class="form-x" action="Adminservlet" id="form1">
				<input type="hidden" name="opr" value="add" />
				<div class="form-group">
					<div class="label">
						<label>账号：</label>
					</div>
					<div class="field">
						<input type="text" id="username" class="input w50"
							placeholder="请输入账号" name="name" />
						<div class="tips" id="text1">${msg1}</div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>密码：</label>
					</div>
					<div class="field">
						<input type="password" id="password" class="input w50"
							placeholder="请输入密码" name="pwd" />
						<div class="tips" id="text2">${msg2}</div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>确认密码：</label>
					</div>
					<div class="field">
						<input type="password" id="repassword" class="input w50"
							placeholder="请确认密码" name="repwd" />
						<div class="tips" id="text3">${msg3}</div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label></label>
					</div>
					<div class="field">
						<button class="button bg-main icon-check-square-o" type="submit">
							提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>